<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h1>computed 计算 <span style="color:red;">属性</span></h1>
        <button v-on:click = "a++">add to A</button>
        <button @click = "b++">add to B</button>
        <p>A是：{{ a }}</p>
        <p>B是：{{ b }}</p>
        <p>年龄是： {{ age }}</p>
        <!-- 在这里调用方法的时候需要加括号 -->
        <!-- <p>A + 年龄：{{ addToA() }}</p>
        <p>B + 年龄：{{ addToB() }}</p> -->

        <!-- 在这里调用属性的时候不需要加括号 -->
        <p>A + 年龄：{{ addToA }}</p>
        <p>B + 年龄：{{ addToB }}</p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
        new Vue({
            el:"#app",
            data:{
                a: 0,
                b: 0,
                age:30
            },
            methods:{
                // methods里的方法，点击任何一个按钮都会执行methods里的方法，比较耗费性能
               /* addToA: function(){
                   console.log('methods:addToA');
                   return this.a + this.age;
               },
               addToB:function(){
                    console.log('methods:addToB');
                   return this.b + this.age;
               } */
            },
            computed:{
                // 计算属性更加优化，变化幅度比较大建议使用这个属性，耗时  大量搜索会使用这个属性 减少项目支出
               addToA: function(){
                   console.log('methods:addToA');
                   return this.a + this.age;
               },
               addToB:function(){
                    console.log('methods:addToB');
                   return this.b + this.age;
               }
            }
            
        })
    </script>
</body>
</html>